iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 2
0
Modern Web

《你的地圖會說話? WebGIS與JavaScript的情感交織》系列 第 2

[1-1] 該選哪種地圖API?小孩子才做選擇。

  • 分享至 

  • xImage
  •  

本系列文章已出版實體書籍:
「你的地圖會說話?WebGIS 與 JavaScript 的情感交織」(博碩文化)
WebGIS啟蒙首選✖五家地圖API✖近百個程式範例✖實用簡易口訣✖學習難度分級✖補充ES6小知識

GIS是什麼?

GIS全名為Geographic Information System,地理資訊系統。
顧名思義,可以想像成資料庫中除了一般的屬性資料外,還額外存了地理空間資訊,
像是一塊地的面積有多大,一條路是從哪裡通到哪裡,
再憑藉這些屬性資料與空間資料的分析,提供作為決策的重要指標。

還記得在早期電腦手機還不是很發達的年代,大家出去玩的時候,
是否時常帶著一大張地圖,或是一本旅遊書,到處趴趴走?
現在的我們則是拿出哀鳳,定個位,開一下Google地圖,搜尋附近好玩的景點,
甚至還可以看看評論、星星數、滑滑街景地圖,開個導航,走最近的路線。
我有時候會想像,如果有一天,沒有了這些便利的工具?出了遠門該怎麼活下去呢?(笑

地圖API初探

WebGIS的開發大多是基於已經開發完善的底層JS函式庫,呼叫他們的API方法進行應用。
然而,百家爭鳴的時代,究竟要選哪家API比較厲害呢?
青菜蘿蔔各有所好,可以說是各有各的好!

  • TGOS Map API

TGOS是我開始接觸WebGIS的第一個地圖API,它的優點是API手冊範例清楚明瞭,
可以直接在TGOS的網站上做測試及修改,算是很好上手的地圖API。
可是並不是我最推薦大家做的,因為TGOS是內政部的服務,
近幾年除了經費不足少有更新外,政府機關在圖資及一些服務的限制很多,
除了API Key申請需透過審核,如果不是與政府機關有合作的公司,根本很難作為最主要的圖台開發API。

        <script type="text/javascript" src="https://api.tgos.tw/TGOS_API/tgos?ver=2&AppID=yourID&APIKey=yourkey" charset="utf-8"></script>
        // TGOS Map API 	
        var TMap = new TGOS.TGOnlineMap(document.getElementById("tmap"), 'EPSG3857');
        TMap.setCenter(new TGOS.TGPoint(121, 23.5));
        TMap.setZoom(7);

TGOS Map API 文件: https://api.tgos.tw/TGOS_MAP_API/docs/site/web/Reference/webapi

  • Google Map API

相信Google地圖是人人都經常使用的地圖,功能齊全、效能好,
介面也是大家最熟悉的,但其收費對於開發團隊而言卻是一場夢魘。
從2018年開始,嚴格的API收費制度的啟用,並且規定每位開發帳號都要綁定信用卡,
現在沒有綁定信用卡會直接顯示「這個網頁無法正確載入Google 地圖」,
綁了信用卡每月僅有28000次的流量,還是會整天擔心用量超額收到帳單。
還記得某一年我們公司的某個圖台網站,提供了地址定位查詢的服務,
上線短短三天用量換算台幣4-5萬,老闆只好命令我們緊急下架功能,
並且進行程式改寫,於是又默默地去填加班單了。(誤

        <script src="https://maps.googleapis.com/maps/api/js?key=yourkey"></script>
        // Google Map API
        var GMap = new google.maps.Map(document.getElementById('gmap'), {
            center: { lat: 23.5, lng: 121 },
            zoom: 7
        });

Google Map API文件: https://developers.google.com/maps/documentation/javascript/overview

  • Here Maps API

相較於高額收費的Google,Here地圖則是擴大開放使用者的流量次數(每月25萬次),
並且也有Android及ios開發用的SDK可供使用,
算是算準了Google地圖昂貴費用帶來的開發人潮流失,搶佔開發人員的使用率。

        <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
        <script src="https://js.api.here.com/v3/3.1/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
        <script src="https://js.api.here.com/v3/3.1/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
        <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
        // Here Maps API
        var platform = new H.service.Platform({
            'apikey': yourkey
        });

        var defaultLayers = platform.createDefaultLayers();
        
        var HMap = new H.Map(
            document.getElementById('hmap'),
            defaultLayers.vector.normal.map,
            {
                zoom: 7,
                center: { lat: 23.5, lng: 121 },
            });
        var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(HMap));
        var ui = H.ui.UI.createDefault(HMap, defaultLayers);

Here Maps API文件: https://developer.here.com/documentation/maps/3.1.19.0/dev_guide/index.html

  • ArcGIS API

ArcGIS API 是由GIS界老字號ESRI公司所開發,在早期WebGIS尚未興起前,GIS的相關工作都在應用程式上實現,包括ArcMap、ArcCatalog、ArcToolbox等工具,讓沒有程式開發基礎的人也能做GIS分析。
在地理資訊Web化的現代,ArcGIS API依舊是功能最完善的地圖API之一,不但支援眾多平台的SDK,在3D地圖上也有所發展。然而,ArcGIS API使用dojo框架,並用reauire.js達到模組化的管理,也成為不容易上手的原因。

        <link rel="stylesheet" href="https://js.arcgis.com/4.16/esri/themes/light/main.css" />
        <script src="https://js.arcgis.com/4.16/"></script>
        //  ArcGIS API
        require(["esri/Map", "esri/views/MapView"], function (Map, MapView) {
            var myMap = new Map({
                basemap: "streets-vector"
            });
            var view = new MapView({
                container: "amap", 
                map: myMap, 
                zoom: 6, 
                center: [121, 23.5] 
            });
        });

ArcGIS API文件: https://developers.arcgis.com/javascript/

  • Leaflet API

發佈於2011年的開源函式庫,操作便利易上手,效能佳。
十分輕量化,不到40KB,並且有許多實用的功能及函式庫,
非常適合中小型的專案及產品開發,並逐漸成為了現在主流的WebGIS API。
有機會再來跟大家介紹一些有趣的函式庫吧?!

        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
        <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
        // Leaflet API
         var LMap = L.map(document.getElementById('lmap'), {
            center: [23.5, 121],
            zoom: 7,
            crs: L.CRS.EPSG3857,
        });
        L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
            maxZoom: 18,
            id: 'mapbox.streets'
        }).addTo(LMap);

Leaflet API文件: https://leafletjs.com/reference-1.7.1.html

  • OpenLayers API

一樣為開源函式庫,年代久遠?!(2006年發佈)
極度不熟,純粹為集滿六個XD

        <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.2.0/css/ol.css" type="text/css">
        <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.2.0/build/ol.js"></script>
        // Openlayers API
        var OMap = new ol.Map({
            view: new ol.View({
                center: ol.proj.fromLonLat([121, 23.5]),
                zoom: 7
            }),
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                })
            ],
            target: 'omap'
        });

OpenLayers API文件: https://openlayers.org/en/latest/apidoc/

六宮格

隨便刻個板,CSS我就不附了,免得獻醜 (X

    <div class="tbody">
        <div class="tr">
            <div class="td">
                <div id="tmap"></div>
            </div>
            <div class="td">
                <div id="gmap"></div>
            </div>
            <div class="td">
                <div id="hmap"></div>
            </div>
        </div>
        <div class="tr">
            <div class="td">
                <div id="amap"></div>
            </div>
            <div class="td">
                <div id="lmap"></div>
            </div>
            <div class="td">
                <div id="omap"></div>
            </div>
        </div>
    </div>

於是乎,六種地圖的台灣。
Ilha Formosa~
https://ithelp.ithome.com.tw/upload/images/20200917/20130604xlFw5dCe6B.jpg

名詞釋義

  • 縮放層級(zoom): 通常為數值,代表地圖放大或縮小的比例
  • 座標系統(crs、srs、coord、coordinate):代表地圖所使用坐標系的標準,跟大地基準、橢球體、投影有關,可以想像成地球是橢圓的,可是卻要壓成平面呈現,不同壓縮的方式就是不同的座標系統。
  • 經度(lon、longitude、x): 在EPSG4326的座標系統中的x座標,也是Google地球(earth)所使用。
  • 緯度(lat、latitude、y): 在EPSG4326的座標系統中的y座標
  • DOM標籤(id、container、target): 在指定的DOM結構中生成地圖物件

那麼多地圖的API,每種寫法都不一樣,好煩喔!/images/emoticon/emoticon04.gif
而且每次要寫的時候都要重查一次API文件,如果一次要產生很多個地圖在網頁上,
一樣的程式不就要寫很多次?
下一篇,將會運用簡單工廠模式對地圖API進行封裝,
敬請期待。/images/emoticon/emoticon71.gif


上一篇
《你的地圖會說話? WebGIS與JavaScript的情感交織》寫在開頭
下一篇
[1-2] 地圖的工廠 - 以 簡單工廠模式 Simple Factory Design Pattern 產出地圖
系列文
《你的地圖會說話? WebGIS與JavaScript的情感交織》30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
webmac
iT邦新手 5 級 ‧ 2022-07-07 09:08:34

你好:

請問大大最近上架的書,正是這些文章的精華嗎?

仰慕者,哈~

PerryLiao iT邦新手 3 級 ‧ 2022-07-07 21:56:45 檢舉

你好:

在鐵人賽的文章中是以兩篇為一組,第一篇為WebGIS功能實作,第二篇則是講解JavaScript的觀念,為WebGIS與JavaScript並重的主題式文章。

然而,實體書則是在經過系統性的整理後,以WebGIS為主軸,詳細介紹WebGIS的基礎觀念,以及各種情境的實戰應用的方式,並且整合五家地圖API的範例程式(包括:Google Map API、Here Maps API、ArcGIS API、TGOS Map API、Leaflet API),一次滿足所有的使用情境。

如果您對WebGIS領域有興趣,抑或是在工作上有地圖開發的需求,強烈推薦實體書籍。如果有其他WebGIS相關的問題,也歡迎留言或私訊討論。

我要留言

立即登入留言